<template>
  <div class="headerWap">
    <Row class="header">
      <Col :lg="{span:6,offset:2}">
        <img src="../assets/images/header-log.png" alt="" srcset="">
      </Col>
      <Col :lg="{span:12,offset:2}">
        <Menu mode="horizontal" :active-name="activeName">
          <MenuItem name="/index" to="/index">
            <strong>首页</strong>
            <p>HOME</p>
          </MenuItem>
          <MenuItem name="/company" to="/company">
            <strong>走进世贸</strong>
            <p>ENTER</p>
          </MenuItem>
          <MenuItem name="/news" to="/news">
            <strong>世贸动态</strong>
            <p>DYNAMIC</p>
          </MenuItem>
          <MenuItem name="/recreation" to="/recreation">
            <strong>世贸服务</strong>
            <p>SERVICE</p>
          </MenuItem>
          <MenuItem name="/invest" to="/invest">
            <strong>招商引资</strong>
            <p>RECRUIT</p>
          </MenuItem>
          <MenuItem name="/about" to="/about">
            <strong>关于我们</strong>
            <p>ABOUT US</p>
          </MenuItem>
        </Menu>
      </Col>
    </Row>
    <Row class="banner">
      <Col :lg="{span:24}">
        <div class="shutter">
          <div class="shutter-img">
            <a href="#" data-shutter-title="Iron Man">
              <img src="../assets/images/content-banner.jpg" alt="#">
            </a>
            <a href="#" data-shutter-title="Iron Man">
              <img src="../assets/images/content-banner.jpg" alt="#">
            </a>
            <a href="#" data-shutter-title="Iron Man">
              <img src="../assets/images/content-banner.jpg" alt="#">
            </a>
            <a href="#" data-shutter-title="Iron Man">
              <img src="../assets/images/content-banner.jpg" alt="#">
            </a>
          </div>
          <ul class="shutter-btn">
            <li class="prev"></li>
            <li class="next"></li>
          </ul>
          <div class="shutter-desc">
            <p>Iron Man</p>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import shutter from "../assets/js/shutter";

export default {
  data() {
    return {
       activeName: this.$route.path.split("/", 2).join("/")
    };
  },
  mounted() {
    let htmlWidth =
      document.documentElement.clientWidth || document.body.clientWidth;
    $(".shutter").shutter({
      shutterW: htmlWidth, // 容器宽度
      shutterH: 500, // 容器高度
      isAutoPlay: true, // 是否自动播放
      playInterval: 3000, // 自动播放时间
      curDisplay: 3, // 当前显示页
      fullPage: true // 是否全屏展示
    });
  }
};
</script>

<style lang="less">
@import "../assets/css/shutter.css";
.headerWap {
  position: relative;
  height: 500px;
  .header {
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    display: flex !important;
    align-items: center;
    position: absolute;
    top: 0;
    z-index: 99;
    .ivu-col {
      img {
        width: 100%;
      }
      .ivu-menu {
        display: flex;
        justify-content: space-around;
      }
      .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active,
      .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover,
      .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active,
      .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
        color: #fff;
        border-bottom: none !important;
        background: rgba(0, 0, 0, 0.5);
        border-radius:5px; 
      }
      .ivu-menu-horizontal {
        line-height: 30px;
        text-align: center;
        .ivu-menu-item {
          color: #fff;
        }
      }
      .ivu-menu-horizontal::after {
        background: none;
      }
      .ivu-menu-light {
        background: none;
      }
    }
  }
  .banner {
    position: absolute;
    top: 0;
    z-index: 90;
    .shutter{
      height: 500px !important;
      img{
        height: 100%;
      }
    }
  }
}
</style>